import { styled } from "uebersicht";
import colorScheme from "../colorScheme.json";
import settings from "../settings.json";

const Colors = colorScheme[settings["colorScheme"]];

export const Box = styled.div`
	display: flex;
	flex-direction: column;
	width: 25vw;
	color: rgba(255, 255, 255, 1);
`;

export const Background = styled.div`
	background: ${Colors.background};
	border-radius: 1vw;
	padding: 0.35vw;
	margin-left: auto;
	margin-right: auto;
`;

export const ClockBox = styled.div`
	display: grid;
	gap: 0.65vw;
	padding: 1vw;
	align-items: center;
	margin-bottom: 0.65vw;
`;

export const Time = styled.div`
	width: 10vw;
	font-size: 3.25vw;
	text-align: right;
	grid-column: 1;
	grid-row: 1 / span 2;
`;

export const Dates = styled.div`
	width: 15vw;
	font-size: 0.75vw;
	text-align: left;
	grid-column: 2 / span 3;
	grid-row: 1;
`;

export const Greeting = styled.div`
	width: 15vw;
	font-size: 1vw;
	text-align: left;
	grid-column: 2 / span 3;
	grid-row: 2;
`;

export const SysInfoTable = styled.table`
	font-size: 0.65vw;
	color: ${Colors.text};

	td {
		width: 5vw;
		padding: 0.15vw 0.15vw 0.15vw 0.15vw;
		text-align: center;
		& > span {
			color: ${Colors.span};
		}
		& > strong {
			color: ${Colors.strong};
		}
	}
`;

export const WeatherBox = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
`;

export const Temperature = styled.h2`
	font-size: 1.625vw;
	color: ${Colors.text};
	& > span {
		font-size: 1.325vw;
	}
`;

export const WeatherImage = styled.img`
	height: 3.75vw;
`;

export const Style = `
	top: 0.65vw;
	left: 0;
	transform: translate(-0%, 0%);
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, Verdana, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 600;
	text-align: justify;
	line-height: 0.65vw;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.50);
`;
